<template>
	<view>
		<view class="mp-search-box">
			<input class="ser-input" type="text" v-model="val" placeholder="请输入您要搜索的内容" />
			<view class="mp-search-button" @click="search">
				<image src="../../static/icon_search.png" style="width: 24px;height: 24px;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				val: ''
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '搜索商品'
			});
		},
		methods: {
			search() {
				uni.redirectTo({
				    url: '../product/list?search='+this.val+'&id=0'
				});
			},
		}
	}
</script>

<style lang="scss">
	.mp-search-box {
		position: relative;
		padding: 10upx 100upx;
		background-color: #f9f9d5;

		.ser-input {
			padding: 0 10px;
			height: 56upx;
			line-height: 56upx;
			font-size: 28upx;
			border-radius: 20px;
			background: rgba(255, 255, 255, .6);
		}

		.mp-search-button {
			position: absolute;
			top: 8px;
			right: 20px;
		}
	}
</style>
